<template>
  <div class="modalbox">
     <span class="modal_close iconfont icon-guanbi" @click="closeModal"></span>
    <ion-content padding>
		 <div class="listbox1" >
			<div class="box_left">
				<img :src="vanType.main_image" v-if="vanType && vanType.main_image !=null" />
				<img src="../assets/images/p1.jpg" v-else />
			</div>
			<div class="box_center">
				<h3 class="tit">{{vanType.name}}</h3>
				<p class="price">
					<strong class="cprice">￥<em>{{checkedProduct.sale_price}} 元/{{checkedProduct.unit}}</em></strong>
					<span class="uprice">  共计：{{totalAmount}} 元</span>
				</p>
			</div>
			<div class="box_right"></div>
		 </div>
		 <!-- <div class="box_tit">请选择规格</div> -->
		 <div class="box_spec">
		 	<button v-for="(item, index) in vanType.productList" v-bind:class="[checkedProduct.id==item.id?'active':'']" @click="getchecked(index)" :key="item.id">
		 		{{item.name}}{{item.spec}}
		 	</button>
		 </div>
		 
    </ion-content>
    <div class="box_num">
		 	<div class="tit">选择数量</div>
		 	<div class="con">
				<!--<div class="numberbox">-->
					<!--<button type="button" id="reduce" @click="reduce()">-</button>-->
					<!--<input type="number" id="text" v-model="products.number">-->
					<!--<button type="button" id="add" @click="add()">+</button>-->
				<!--</div>-->
				<van-stepper :max="checkedProduct.stock_num" v-model="checkNum" @change="onNumChange" />
			</div>
		 </div>
	<div class="footbar">
		<button class="foot_btn" plain @click="openPage('home')">
			<em class="iconfont icon-shouye"></em>
			<span class="txt">首页</span>
		</button>
		<button class="foot_btn" plain  @click="openPage('shopCarts')">
			<em class="iconfont icon-gouwuche1"></em>
			<span class="txt">购物车</span>
		</button>
		<button class="foot_btn1" @click="addToCart(0)">
			<span class="txt">加入购物车</span>
		</button>
		<button class="foot_btn2" @click="addToCart(1)">
			<span class="txt">立即购买</span>
		</button>
	</div>
  </div>
</template>

<script>
import router from "../router";
import { Stepper } from "vant";
import { fmMoney } from "@/utils/index.js";
import baseUtil from "@/utils/baseUtil.js";
import { updateToCart, createOrder } from "@/api/vanProducts";
export default {
  name: "typeProductsModal",
  components: { [Stepper.name]: Stepper },
  props: {
    vanType: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      checkNum: 0,
      totalAmount: 0,
      checkedProduct: {}
    };
  },
  methods: {
    //切换商品
    getchecked(index) {
      this.checkedProduct = this.vanType.productList[index];
      this.checkStock(this.checkNum);
      // console.log("checkStock===:", this.checkedProduct);
    },
    //关闭modal
    closeModal() {
      this.$ionic.modalController.dismiss();
    },
    // 当数量变化时 ，检查库存是否充足
    onNumChange(num) {
      this.checkStock(num);
    },
    //检查库存是否充足
    checkStock(num) {
      if (num > this.checkedProduct.stock_num) {
        this.checkNum = this.checkedProduct.stock_num;
        this.presentToast("库存不足 ！", "warning");
      }
      this.totalAmount = fmMoney(
        this.checkedProduct.sale_price * this.checkNum,
        2
      );
    },
    // goCart() {
    //   this.$ionic.modalController.dismiss({
    //     result: "cart"
    //   });
    // },
    //弹出警告 提示等信息
    //color: 'success',warning,"primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark"
    async presentToast(msg, color) {
      color = color == null || color == "" ? "dark" : color;
      const toast = await this.$ionic.toastController.create({
        message: msg,
        color: color,
        duration: 1000,
        position: "top"
      });
      toast.present();
    },
    //跳转
    openPage(pageName) {
      //必须先关闭modalController 才能跳转
      this.$ionic.modalController.dismiss();
      router.push({ name: pageName });
    },
    //加入购物车 type =0 加入购物车 ，1 立即购买
    async addToCart(type) {
      let addProduct = {
        vanSpecId: this.checkedProduct.id,
        count: this.checkNum,
        salePrice: this.checkedProduct.sale_price,
        saleType: "SALE"
      };
      let resp = await updateToCart(addProduct);
      console.log("addToCart-resp:", resp);
      if (baseUtil.isNotBlankObjs(resp) && resp.code == 0) {
        if (type == 0) this.presentToast("已添加至购物车", "success");
        if (type == 1) {
          // this.$router.push();
          let orderParam = { shopCartIds: resp.data.shopCartId };
          let orderResp = await createOrder(orderParam);
          console.log("addToCart=====orderResp:", orderResp);
          if (baseUtil.isNotBlankObjs(orderResp)) {
            if (orderResp.code == 0) {
              this.$ionic.modalController.dismiss();
              router.push({
                name: "orderDetail",
                query: { orderNumber: orderResp.data.orderNumber }
              });
            } else this.presentToast(orderResp.warnMessage, "warning");
          }
          // this.presentToast('这是立即购买按钮');
        }
      }
    }
    //立即购买
  },
  mounted() {
    this.checkedProduct = this.vanType.productList[0];
    this.totalAmount = fmMoney(
      this.checkedProduct.sale_price * this.checkNum,
      2
    );
  }
};
</script>
<style>
.sc-ion-modal-ios-h {
  --height: 60%;
  align-items: flex-end;
}
.modalbox .ios {
  --background: var(--ion-background-color, #fff);
}
.modalbox .modal_close {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  color: #999;
  font-size: 1.2rem;
  z-index: 100;
}
.modalbox .box_tit {
  text-align: left;
  font-size: 0.8rem;
  color: #666;
  padding: 0.5rem 0.75rem;
}
.modalbox .box_spec {
  padding: 0.75rem 0.75rem;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 6rem;
}
.modalbox .box_spec button {
  padding: 0 0.75rem;
  height: 2.2rem;
  line-height: 2.2rem;
  overflow: hidden;
  background: #eee;
  display: block;
  color: #333;
  font-size: 0.8rem;
  margin: 0 0.5rem 0.5rem 0;
  border-radius: 0.5rem;
}
.modalbox .box_spec button::after {
  display: none;
}
.modalbox .box_spec button.active {
  background: #f93;
  color: #fff;
}
.modalbox .box_num {
  width:100%;
  padding: 0.5rem 0.75rem;
  height: auto;
  overflow: hidden;
  background: #fff;
  position: absolute;
  bottom:3rem;
  display: flex;
  justify-content: space-between;
  border-top:0.05rem #eeeeee solid;

}
.modalbox .box_num .tit {
  font-size: 0.8rem;
  color: #666;
  margin-top: 0.5rem;
}
</style>